<template>
  <div class="homeButtomTab">
    <ul class="ButtomTab">
      <li>
        <span>
          <router-link tag="a" to="a" class="active">
            <img src="../../assets/icon/toolbar_home_selected.png" alt />
            <br />首页
          </router-link>
        </span>
      </li>
      <li>
        <span>
          <router-link tag="a" to="/Classification">
            <img src="../../assets/icon/toolbar_categories_normal.png" alt />
            <br />
            分类
          </router-link>
        </span>
      </li>
      <li>
        <span>
          <router-link tag="a" to="a">
            <img src="../../assets/icon/toolbar_shopcar_normal.png" alt />
            <br />
            购物车
          </router-link>
        </span>
      </li>
      <li>
        <span>
          <router-link tag="a" to="a">
            <img src="../../assets/icon/toolbar_personal_normal.png" alt />
            <br />
            我的
          </router-link>
        </span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "homeButtomTab",
  data() {
    return {};
  },
  components: {}
};
</script>
<style scoped>
.homeButtomTab {
  width: 100%;
  position: fixed;
  height: 0.92rem;
  border-top: 0.02rem solid #ddd;
  background: #fff;
  z-index: 1111;
  max-width: 12.8rem;
  bottom: 0;
}

.ButtomTab {
  display: flex;
  justify-content: space-around;
}

.ButtomTab li {
  height: 0.92rem;
  box-sizing: border-box;
  text-align: center;
}

.ButtomTab li span {
  display: inline-block;
  width: 1.14rem;
  height: 0.92rem;
  padding: 0.16rem 0;
}

.ButtomTab li span a {
  display: block;
  font-size: .24rem;
  line-height: 1.5;
  color: #333;
}

.ButtomTab li span a.active {
  color: #ff4664;
}

.ButtomTab li span a img {
  vertical-align: top;
  height: 0.4rem;
}
</style>
